<template>
  <div id="home-course">
<!--    <div class="type">-->
<!--      <div class="labels card">-->
<!--        <span>课程分类标签</span>-->
<!--        <span-->
<!--            :class="['label', { 'label-chosen': label === item.title }]"-->
<!--            @click="getLabel(item.title)"-->
<!--            v-for="item in labels"-->
<!--            :key="item.id"-->
<!--        >{{ item.title }}</span>-->
<!--      </div>-->
<!--    </div>-->

    <div class="main">
      <div class="head">
        <div>
          <span class="title">全部课程</span>
          <span class="course-num">共{{ totalNum }}门课</span>
        </div>
<!--        课程排序分类-->
<!--        <div>-->
<!--          <span-->
<!--              :class="['sort', { 'sort-chosen': sort === item }]"-->
<!--              @click="getSort(item)"-->
<!--              v-for="item in sorts"-->
<!--              :key="item"-->
<!--          >{{ item }}</span-->
<!--          >-->
<!--        </div>-->
      </div>
      <div
          :key="$route.query.sort"
          class="course-list"
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.01)"
      >
        <div class="list-item" v-for="item in courseList" :key="item.id">
          <div class="course-main card">
            <div class="course-cover img-box">
              <img :src="item.cover" alt="item.title"/>
            </div>
            <div class="course-info">
              <div class="course-title">{{ item.name }}</div>
              <div class="course-teacher">
                <span class="name">{{ item.teacherName }}</span>
                <span class="position">{{ item.teacherTitle }}</span>
              </div>
              <div class="course-intro">
                <!--                <span class="course-status">{{ item.status }}</span>-->
                <span class="course-intro-content">{{ item.intro }}</span>
              </div>
              <div class="course-price">
                <del class="price-before">￥{{ item.price }}</del>
                <span class="price-now">￥{{ item.price * item.discount / 10 }}</span>
              </div>
              <div class="course-learn" @click="gotoCourseDetail(item.id)">
                立即学习
              </div>
              <div class="course-count">{{ item.participantNum }}人已学习</div>
            </div>
          </div>
          <div class="line"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import constants from "_u/constants";

export default {
  name: "Course",
  data() {
    return {
      loading: false,
      totalNum: 100,
      labels: [],
      label: "",
      sorts: ["综合", "学习人数", "最新上架", "价格"],
      sort: "",
      courseList: [],
    };
  },
  mounted() {
    this.labels = [{id: -1, title: "全部"}].concat(constants.LABELS);
    this.handelQuery(this.$route.query);
  },
  methods: {
    getCourseList() {
      this.loading = true;
      this.courseList = [];
      this.$api
          .getCourseList({
            pageSize: 20,
            pageNow: 1,
            label: this.label,
            sortType: 0
          }).then(({data}) => {
        this.courseList = data.data.rows;
        this.loading = false;
      });
    },
    handelQuery({label, sort}) {
      if (
          !label ||
          this.labels.findIndex((item) => item.title === label) >= 0
      ) {
        this.label = label || "全部";
        if (!sort || this.sorts.includes(sort)) {
          this.sort = sort || "综合";
          this.getCourseList();
        } else {
          this.$router.push({
            name: "course-list",
            query: {
              label,
            },
          });
        }
      } else {
        this.$router.push({
          name: "course-list",
        });
      }
    },
    gotoCourseDetail(id) {
      this.$router.push({
        name: "course-detail",
        params: {courseId: id},
      });
    },
    getLabel(label) {
      this.$router.push({
        name: "course-list",
        query: {
          label,
        },
      });
    },
    getSort(sort) {
      this.$router.push({
        name: "course-list",
        query: {
          label: this.$route.query.label,
          sort,
        },
      });
    },
  },
  watch: {
    $route(to) {
      this.handelQuery(to.query);
    },
  },
};
</script>

<style scoped lang="scss">
.type {
  margin-bottom: 20px;
}

.labels {
  padding: 15px 25px;
  font-size: 14px;

  > span {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
  }
}

.label {
  border-radius: 15px;
  cursor: pointer;
  transition: 0.1s;
  color: #7a7a7a;

  &:hover {
    transition: 0.2s;
    background: #c5dcff;
  }
}

.label-chosen {
  background: #8eb9ff;
  color: white;
  font-weight: bolder;
  transition: 0.1s;
}

.head {
  margin-bottom: 20px;
  font-size: 14px;

  > div {
    margin-bottom: 20px;
  }

  .title {
    font-size: 18px;
  }

  .course-num {
    color: #aaa;
    margin-left: 10px;
  }

  .sort {
    margin-right: 10px;
    cursor: pointer;
  }

  .sort-chosen {
    font-weight: bolder;
  }
}

.list-item {
  margin-bottom: 20px;

  &:hover {
    .course-title {
      transition: 0.5s;
      color: #357ff8;
    }
  }

  .line {
    content: "";
    display: block;
    margin: 20px auto;
    height: 0;
    border-bottom: 1px solid rgba(128, 128, 156, 0.3);
  }

  &:last-child .line {
    display: none;
  }
}

.course-main {
  display: flex;
  position: relative;
  height: 180px;
}

.course-list {
  border-radius: 20px;
  min-height: 480px;
  margin-bottom: 30px;
}

.course-cover {
  flex-shrink: 0;
  height: 100%;
  width: 280px;
  margin-right: 20px;
}

.course-info {
  flex: 1;
  position: relative;
  text-align: left;

  > div {
    margin: 10px 0;
  }
}

.course-title {
  transition: 0.5s;
  font-size: 20px;
}

.course-teacher {
  font-size: 14px;

  .name {
    margin-right: 20px;
  }

  .position {
    border-radius: 4px;
    padding: 4px 6px;
    background: #eaeaea;
  }
}

.course-status {
  display: inline-block;
  font-size: 12px;
  border-radius: 4px;
  padding: 0 8px;
  color: white;
  background: #8eb9ff;
  margin-right: 10px;
}

.course-intro {
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-intro-content {
  font-size: 14px;
}

.course-price {
  margin-top: 30px !important;

  .price-before {
    color: #aaa;
    margin-right: 3px;
  }

  .price-now {
    text-shadow: 0 4px 4px #357ff845;
  }
}

.course-learn {
  color: white;
  font-size: 16px;
  position: absolute;
  bottom: -10px;
  right: 0;
  padding: 5px 15px;
  border-radius: 20px;
  background: #357ff8;

  cursor: pointer;
  transition: 0.3s;

  &:hover {
    transition: 0.3s;
    background: #2a74eb;
  }
}

.course-count {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  color: #aaa;
}
</style>
